<template>
	<div class="item">
		<div>
			<div class="item-img">
			    <img :alt="itemList.name_title" :src="itemList.sku_info[itemListindex].ali_image+'?x-oss-process=image/resize,w_206/quality,Q_80/format,webp'" style="opacity: 1;">
			</div>
			<h6>{{itemList.name}}</h6>
			<h3 >{{itemList.name_title}}</h3>
			<div class="params-colors">
				<ul class="colors-list">
					<li v-for="(itemList,index) in itemList.sku_info">
						<a href="javascript:;" :title="itemList.spec_json.show_name" @click="tab(index)">
							<img :src="'http://img01.smartisanos.cn/'+itemList.spec_json.image+'20X20.jpg'">
						</a>
					</li>
				</ul>
			</div>
			<div class="item-btns clearfix">
				<span class="item-gray-btn">
					<router-link :to="{name:'Item',query:{itemId:itemList.sku_info[itemListindex].sku_id}}">查看详情</router-link> 
				    </span><span class="item-blue-btn" @click="addCarpanelData(itemList.sku_info[itemListindex])">加入购物车 </span>
			</div>
			<div class="item-price clearfix">
				<i>¥</i><span>199.00</span>
			</div>
			<div class="discount-icon">false</div>
			<div class="item-cover">
				<router-link :to="{name:'Item',query:{itemId:itemList.sku_info[itemListindex].sku_id}}"></router-link>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">

export default{
	data(){
		return{
            itemListindex:0
		}
	},
	//接收父组件参数
	props:{
		itemList:Object
	},
	//方法
	methods:{
		tab(index){
			this.itemListindex=index
		},
		// 添加购物车的方法
		addCarpanelData(data){
			let itemData={info:data,count:1}
            this.$store.commit('addCarpanelData',itemData)
		}
	}
}
</script>
